import React from 'react';
import Sectioner from './section';
import PropTypes from 'prop-types';
class Main extends React.Component {
    constructor(props){
        super(props);
        this.submit = this.submit.bind(this);
    }
    submit(e) {
        const {_title,_color} = this.refs;
        e.preventDefault();
        alert(`New color:${_title.value} ${_color.value}`);
        _title.value = '';
        _color.value = '#000000';
        _title.focus();
    }
    static defaultProps = {
        title: '333',
        main: [
            {
                title: '外观',
                list: [{
                    "id": "c0001",
                    "name": "秒白",
                    "colorValue": "eeeef0",
                    "basePrice": 0,
                }
                ]
            }
        ]
    }
    static propTypes = {
        title:PropTypes.string,
        main:(props,propsName) => {
            if(props.main.length <= 2) {
                return new Error('arg length is error')
            } else {
                return null;
            }
        }
    }
    render() {
        const { main, title } = this.props;
        return (
            <div id="contain">
                <article>
                    <form action="" onSubmit={this.submit}>
                        <input type="text" ref="_title" placeholder="color title..." required />
                        <input type="color"  ref="_color" required />
                        <button>ADD</button>
                    </form>
                </article>
                <h1>{title}</h1>
                <article>
                    {main.map((m, mi) => <Sectioner key={mi} {...m} />)}
                </article>
            </div>
        )
    }
};

 
export default Main;